﻿<%@ Page Title="" Language="C#" MasterPageFile="~/mContentContainer.Master" AutoEventWireup="true" CodeBehind="uploadifyImage.aspx.cs" Inherits="Rmlife.Web.Systems.uploady.uploadifyImage" %>

<%@ Register TagPrefix="cc2" Namespace="Rmlife.Control" Assembly="Rmlife.Control" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="/Tools/jQuery.Plugins/uploadify-v2.1.4/uploadify.css" rel="stylesheet"
        type="text/css" />
    <link href="/styles/tab.css" type="text/css" rel="stylesheet" />
    <link href="/Systems/uploady/styles/uploady.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="/Systems/uploady/js/common.js"></script>
    <script type="text/javascript" src="/Systems/uploady/js/avatar.js"></script>
    <script type="text/javascript" src="/Systems/uploady/js/Resize.js"></script>
    <script type="text/javascript" src="/Tools/jQuery.Plugins/uploadify-v2.1.4/swfobject.js"></script>
    <script type="text/javascript" src="/Tools/jQuery.Plugins/uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //处理上传
            $("#fImg").uploadify({
                'uploader': '/Tools/jQuery.Plugins/uploadify-v2.1.4/uploadify.swf?tn=' + Math.random(),
                'buttonImg': '/Systems/uploady/images/upload.jpg',
                'width': '80px',
                'script': '/Tools/Handlers/SettingHandler.ashx?opt=upload&rn=' + Math.random(),
                'cancelImg': '/Tools/jQuery.Plugins/uploadify-v2.1.4/cancel.png',
                'folder': 'Imagelogo',//上传文件夹名
                'queueID': 'fileQueue',
                'auto': true, //是否自动上传
                'multi': false, //是否可多选
                'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
                'fileDesc': 'Image Files(.JPG,.JPEG,.GIF,.PNG)',
                'onCheck': function (event, data, key) {

                },
                'onOpen': function (event, ID, fileObj) {
                    var maxSize = 1024 * 1024;
                    if (fileObj.size > 2 * maxSize) {
                        Popup.Error("图片文件不能超过2M");
                        return;
                    }
                },
                'onComplete': function (event, queueId, fileObj, response, data) {
                    var rn = Math.random();
                    var ret = eval('(' + response + ')');
                    if (null != ret.error && ret.error != '') {
                        Popup.Error(ret.error);
                        return;
                    }
                    else {
                        var str = decodeURIComponent(ret.url);
                        var url = str;
                        //alert(ret.width);
                        var jsonStr = {
                            "width": ret.width,
                            "height": ret.height,
                            "url": url
                        }
                        // alert(jsonStr.url);
                        Avatar(jsonStr);
                        //  $(".img").attr("src", str).attr("height", ret.height);
                    }

                },
                'onError': function (event, ID, fileObj, errorObj) {

                }
            });

            $('#uploadify').uploadifyUpload();

        })
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlace" runat="server">
    <div class="ManagerForm">
        <fieldset>
            <legend style="background: url(/images/icons/icon19.jpg) no-repeat 6px 50%;">上传实例一</legend>
            <cc2:TabControl ID="TabControl1" SelectionMode="Client" runat="server" TabScriptPath="/js/tabstrip.js" Height="100%">
                <cc2:TabPage Caption="实例一" ID="tabPage1">
                    <asp:MultiView ID="MultiView1" runat="server">
                        <asp:View ID="View1" runat="server">
                            <input type="hidden" id="hpx" runat="server" value="" />
                            <input type="hidden" id="hpy" runat="server" value="" />
                            <input type="hidden" id="hwidth" runat="server" value="" />
                            <input type="hidden" id="hsrc" runat="server" value="" />
                            <!--右侧-->
                            <div class="per-cont per-contm">
                                <div class="title">
                                    <h2>修改头像</h2>
                                    <b></b>
                                </div>
                                <div class="per-avatar-text">
                                    <input type="file" class="file" id="fImg" name="fImg" />
                                    <p>
                                        仅支持JPG GIF PNG图片文件，且文件小于1M，<em>GIF图片需大三以上用户才能上传</em>
                                    </p>
                                    <p id="upLoadTx" style="visibility: hidden; color: #F10">
                                        上传中..
                                    </p>
                                </div>
                                <iframe id="hf" name="hf" runat="server" style="display: none;"></iframe>
                                <div class="per-avatar-box clearfix">
                                    <div class="bigImg">
                                        <img src="images/toum.png" class="img" id="bigimg" width="300" height="300" alt="" />
                                    </div>
                                    <div class="midImg">
                                        <img src="images/toum.png" id="midimg" class="img" alt="" />
                                    </div>
                                    <div class="smallImg">
                                        <img src="images/toum.png" id="smallimg" class="img" alt="" />
                                    </div>
                                </div>
                                <div class="btnbox ">
                                    <input id="BtnSubmit" type="submit" value="保存" class="btn" />
                                    <input type="reset" class="btn" value="取消" onclick="javascript: window.location.href = 'perAvatar.aspx';" />
                                </div>
                            </div>
                            <!--右侧end-->
                            <script type="text/javascript">
                                var _avatar = new resize({
                                    "bigImg": "#bigimg",
                                    "midImg": "#midimg",
                                    "smallImg": "#smallimg"
                                })</script>
                        </asp:View>
                        <asp:View ID="View2" runat="server">
                            <!--右侧-->
                            <div class="per-cont per-contm">
                                <div class="title">
                                    <h2>修改头像</h2>
                                    <b></b>
                                </div>
                                <div class="per-avatar-box clearfix">
                                    <div class="bigImg" style="background: none;">
                                        <img src="images/toum.png" class="img" id="Img1" width="120"
                                            alt="" runat="server" />
                                    </div>
                                    <div class="midImg" style="background: none;">
                                        <img src="images/toum.png" id="Img2" class="img" alt=""
                                            runat="server" />
                                    </div>
                                    <div class="smallImg" style="background: none;">
                                        <img src="images/toum.png" id="Img3" class="img" alt=""
                                            runat="server" />
                                    </div>
                                </div>
                                <div class="btnbox ">
                                    <asp:Button ID="btnStart" Text="修改头像" CssClass="btn" runat="server" OnClick="btnStart_Click" />
                                </div>
                            </div>
                            <!--右侧end-->
                        </asp:View>
                    </asp:MultiView>
                </cc2:TabPage>
            </cc2:TabControl>
        </fieldset>
    </div>
    <script type="text/javascript">
        //$(function(){
        function Avatar(opt) {
            var _src = opt.url;

            var _img = new Image();
            _img.src = _src;
            $("#upLoadTx").css("visibility", "");
            _img.onload = function () {
                //alert(1)
                var _width = _img.width;
                var _height = _img.height;
                var _nW, _nH;
                //                if (_width < 180 || _height < 180) {
                //                    alert("您传的图片大小不符合规范(不能小于180*180)");
                //                    return false;
                //                } 
                //                else {
                _nW = 300;
                // _nH = Math.round(_height * 220 / _width);
                _nH = _height;
                //                }
                $("#bigimg").attr("src", _src);
                $("#<%=hsrc.ClientID %>").val(_src);
                $("#bigimg").attr("height", _nH);
                $("#bigimg").attr("width", _nW);
                $("#midimg").attr("src", _src);
                $("#smallimg").attr("src", _src);
                $("#upLoadTx").css("visibility", "hidden");
                _avatar.refresh();
            }
        }
    </script>
</asp:Content>
